<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 进度条 -->
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang2.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.身份认证</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/cloud_brush_danghang1.png);background-repeat: no-repeat; width: 350rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.储蓄卡认证</text>
				</view>
			</view>

			<view class="grace-flex-center" style="width: 750rpx;margin-top: 40rpx;">
				<!-- 上传身份证正面 -->
				<view @tap="getIDCard()">
					<image :src=" id_card_img.length>0 ? id_card_img : '../../static/shenfenzheng.png'" style=" width: 330rpx;height: 210rpx; border-radius: 10rpx;"></image>
				</view>
				<!-- 上传身份证反面 -->
				<view style="margin-left: 40rpx;" @tap="getIDback">
					<image :src=" idcard_back.length>0 ? idcard_back : '../../static/shenfenzhengs.png'" style=" width: 330rpx;height: 210rpx; border-radius: 10rpx;"></image>
				</view>
			</view>

			<view class="grace-rows grace-flex-center" style="margin-top: 25rpx;">
				<image src="../../static/xiangji.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin-left: 20rpx; font-size:23rpx;font-weight:400;color:rgba(51,51,51,1);">{{ xiangjishuoming }}</text>
			</view>

			<view style="margin-top: 35rpx;">
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">真实姓名：</text>
					<input placeholder="请输入您的真实姓名" v-model="user_name" style="margin-left: 60rpx;" />
				</view>

				<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">身份证号：</text>
					<input placeholder="请输入身份证号" v-model="user_id" style="margin-left: 60rpx;" />
				</view>
			</view>
			<view>
				<button @tap="xiayibu" :style="{background:button_color}" class="button_color">下一步</button>
			</view>
		</view>
	</gracePage>
</template>

<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	// #ifdef APP-PLUS
	const card = uni.requireNativePlugin('DC-CardRecognize');
	// #endif

	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				user_name: '',
				user_id: '',
				id_card_img: '', // 身份证正面
				idcard_back: '', // 身份证反面
				img_id: '', // 身份证正面id
				card_id: '', // 身份证反面id
				xiangjishuoming: '请点击卡片上传图片'

			}
		},
		onShow() {
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			// 下一步认证页面跳转事件
			xiayibu() {
				if (this.user_name === '' || this.user_id === '') {
					uni.showToast({
						title:'请将信息填写完整',
						icon: 'none'
					})
				} else {
					uni.setStorageSync('shiming', {
						user_name: this.user_name,
						user_id: this.user_id,
						img_id: this.img_id,
						card_id: this.card_id
					})
					uni.navigateTo({
						url:'/pages/personal_center/authentication2'
					})
				}
			},
			// 上传身份证正面
			getIDCard() {
				var vm = this
				this.UpFile('api/publicapi/upfile',function(res){
					console.log(res);
					if(res.code == 200){
						vm.id_card_img = res.data.quan_path;
						vm.img_id = res.data.id;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},{width:330})
			},
			// 上传身份证反面
			getIDback() {
				var vm = this;
				this.UpFile('api/publicapi/upfile',function(res){
					console.log(res);
					if(res.code == 200){
						vm.idcard_back = res.data.quan_path;
						vm.card_id = res.data.id;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				},{width:330})
			}
		},
		onLoad: function() {
			// #ifdef APP-PLUS
			this.xiangjishuoming = '请点击卡片上传图片';
			// #endif
		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.button_color{
		margin-top: 70rpx; width:500rpx;height:90rpx;background:#3187D5;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);
	}
</style>
